<template>
    <d2-container>
        <div class="muse_filter_box">
            <el-form ref="filtersForm" :model="form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item>
                            <el-input placeholder="名称" v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <!-- <el-input placeholder="角色" v-model="form.role"></el-input> -->  
                            <el-select v-model="form.productCategory" clearable placeholder="请选择">
                              <el-option
                                v-for="item in productCategory"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="filterSearch('filtersForm')">搜索</el-button>
                        <el-button @click="resetForm('filtersForm')">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="muse_table_box">
            <div class="muse_control_box">
                <el-button class="muse_float_left" type="primary" @click="addData">添加</el-button>
                <!-- <el-button @click="deleteSelected">删除选中</el-button>
                <el-button @click="deleteAll">删除全部</el-button> -->
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <!-- <el-table-column fixed type="selection" width="55"/> -->
                <el-table-column prop="name" label="商品名称"/>
                <el-table-column prop="description" label="描述"/>
                <el-table-column prop="category" label="商品种类"/>
                <el-table-column prop="statusText" label="状态"/>
                <el-table-column prop="attribute[0].discountPrice" label="折扣"/>
                <el-table-column prop="attribute[0].price" label="价格"/>
                <el-table-column prop="attribute[0].point" label="积分"/>
                <el-table-column prop="attribute[0].stock" label="库存"/>
                <el-table-column prop="date" label="创建时间"/>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button v-if="scope.row.status == 0" @click="upOrDown(scope.row, 0)" type="text" size="small">上线</el-button>
                        <el-button v-if="scope.row.status == 1" @click="upOrDown(scope.row, 1)" type="text" size="small">下线</el-button>
                        <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
        </div>
    </d2-container>
</template>

<script>
  import tableMixin from '../mixins/tableMixin'
  import { getProductList,getProductCategoryList,productOnShelf,productOffShelf,deleteproduct } from '@/api/admin'
  import formatTime from '@/libs/util.formatTime'
  export default {
    name: 'productdetailList',
    mixins: [tableMixin],
    data () {
      return {
        form: {
          name: '',
          productCategory:''
        },
        productCategory:[]
      }
    },
    created () {
      this.getTableData()
    },
    beforeRouteEnter(to, from, next) {
      next(vm=>{
        vm.getTableData()
      })
    },
    methods: {
      // 获取列表数据
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        params = Object.assign({}, params, this.form)
        this.productCategory = (await getProductCategoryList()).data.data
        const { code, data: { total, currentPage, data, pageSize } } = await getProductList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        data.map(e =>{
          e.category = ""
          e.statusText = e.status == 0 ? "未上线" : "已上线"
          e.discountPrice = e.discountStatus == 0 ? "不打折" : e.discountPrice
          e.date = formatTime.formatDate(e.createdAt)
          e.productCategory.map(item =>{
            e.category = e.category + item.name
          })
        })
        this.tableData = data
      },
      // 添加数据
      addData () {
        this.$router.push({name: 'productDetail'})
      },
      // 删除选中行
      deleteSelected() {
        this.wrapConfirm(1).then(() => {
          console.log('delete selected row')
        }).catch(() => {})
      },
      // 删除全部
      deleteAll() {
        this.wrapConfirm(0).then(() => {
          console.log('delete all')
        }).catch(() => {})
      },
      // 编辑该行
      editRow(row) {
        this.$router.push({name: 'productDetail', query: { id: row._id}})
        console.log('edit row', row)
      },
      // 上线或下线
      upOrDown(row) {
        this.wrapConfirm(row.status == 0 ? 2 : 3).then(async () => {
          if(row.status === 0) {
            await productOnShelf({id: row._id})
            this.getTableData()
          } else {
            await productOffShelf({id: row._id})
            this.getTableData()
          }
        }).catch(() => {})
      },
      // 删除该行
      deleteRow(row) {
        this.wrapConfirm(4).then(async() => {
            await deleteproduct({id: row._id})
            this.getTableData()
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped>

</style>
